const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode:'development',
    entry:'./src/app.jsx',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'js/app.js',
        publicPath:'/'
    },
    resolve:{
        extensions:['.js','.jsx','.css','.scss'],
        alias:{
            '@':path.resolve(__dirname,'src'),
            'page':path.resolve(__dirname,'src/pages'),
            'component' :path.resolve(__dirname,'src/component')
        }
    },
    module:{
        rules:[
            {
                test:/\.js|jsx$/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:['@babel/preset-env','@babel/preset-react']
                    }
                },
                exclude:/node_modules/
            },
            {
                test:/\.css$/,
                use:[
                    {
                        loader:MiniCssExtractPlugin.loader,
                        options:{
                            publicPath:'../'
                        }
                    },
                    'css-loader'
                ]
            },
            {
                test:/\.scss$/,
                use:[MiniCssExtractPlugin.loader,'css-loader','sass-loader']
            },
            {
                test:/\.(png|jpg|gif)$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            limit:8192,
                            name:'resource/[name].[ext]', // name属性值是相对于output的path值而言
                            publicPath:'../'
                        }
                    }
                ]
            },
            {
                test:/\.(eot|svg|ttf|woff|woff2|otf)$/,
                use:[
                    {
                        loader:'url-loader',
                        options:{
                            limit:8192,
                            name:'resource/[name].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins:[
        // 处理html文件
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            favicon:'./favicon.ico'
        }),
        // 独立css文件
        new MiniCssExtractPlugin({
            filename:'css/[name].css',
            chunkFilename:'[id].css'
        })
    ],
    // 提取公用的模块
    optimization:{
        splitChunks:{
            cacheGroups:{
                commons:{
                    name:"commons",
                    chunks:"initial",
                    minChunks:2
                }
            }
        }
    },
    devServer:{
        contentBase:path.join(__dirname,'dist'),
        port:3000,
        compress:true,
        historyApiFallback: true,
        proxy:{
            '/manage':{
                target:'http://admintest.happymmall.com',
                changeOrigin:true
            },
            '/user/logout.do':{
                target:'http://admintest.happymmall.com',
                changeOrigin:true
            }
        }
    }
}